<template>
	<view class="containor">
		<car-address></car-address>
		<view class="title">
			<uni-icons type="shop" size="18" class="icon"></uni-icons>
			<text>购物车</text>
		</view>
		<view class="car_list">
			<uni-swipe-action>
				<block v-for="(item,index) in car" :key="index">
					<uni-swipe-action-item :right-options="options" @click="swipeItemClick(item)">
						<!-- 引入组件 -->
						<!-- radioChange是自定义事件 子传父 $emit来触发 传递参数 -->
						<goods-item :item="item" :showRadio="showRadio" :showNum="showNum" @radioChange="radioChange" @numChange="numChange"></goods-item>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
		</view>
		<settle-accounts></settle-accounts>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex';
	export default {
		data() {
			return {
				showRadio:true,
				showNum:true,
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#c00000'
						}
					}
				]
			};
		},
		onLoad(){},
		onShow(){
			// 进入页面时触发
			this.setBadge();
		},
		methods:{
			// 辅助函数解构出mutations中的方法
			...mapMutations('car',['updateState','updateCount','removeItem']),
			// 当单选框选中未选中时 触发mutations方法 更新state中的数据
			// goods_id_status为子组件内传递过来的参数
			radioChange(goods_id_status){
				console.log(goods_id_status);
				// 触发UNdateState方法 并且传递参数
				this.updateState(goods_id_status);
			},
			// 当点击数量增加时 触发mutations方法 更新state中的数据
			// goods_id_count为子组件内传递过来的参数
			numChange(goods_id_count){
				console.log(goods_id_count);
				// 触发mutations内直接更改state数据的方法 参数为更新后的数据 id count
				this.updateCount(goods_id_count);
				console.log(this.total);
				this.setBadge();
			},
			//设置tabBar导航右上角的文本
			setBadge(){
				// uni.setTabBarBadge为uni-app自带的API用来设置tabBat导航图标的文本
				uni.setTabBarBadge({
					// index表示下标 tabBar导航的下标
					index:2,
					// text为文本 必须为字符串 + ""会因式转换为字符串类型
					text:this.total + ''
				})
			},
			//滑动删除点击事件 
			swipeItemClick(item){
				console.log('测试滑动删除事件是否触发');
				// 点击时触发mutations中的方法 将当前的数据传递进去 mutations内通过过滤id来删除删除元素
				this.removeItem(item);
				// 删除之后再调用更改tabBar图标文本事件
				this.setBadge();
			}
		},
		computed:{
			// 展开state中的car数组
			...mapState('car',['car']),
			...mapGetters('car',['total'])
		}
	}
</script>

<style lang="scss" scoped>
.containor{
	padding-bottom: 160rpx;
	.title{
		padding-left: 20rpx;
		line-height: 100rpx;
		font-size: 40rpx;
		border-bottom: 4rpx solid #C0C0C0;
		.icon{
			padding-right: 30rpx;
		}
	}
}
</style>
